<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="姓名"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['name', {rules: [{required: true, message: '请输入姓名！'}]}]" />
        </a-form-item>
        <a-form-item
          label="身份证号"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['idCard', {rules: [{required: true, message: '请输入身份证号！'}]}]" />
        </a-form-item>
        <a-form-item
          label="职称"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <mySelect
            ref="title"
            :v-model.sync="title"
            v-decorator="['title', {rules: [{required: false, message: '请选择职称！'}]}]"
            :settings="{url:'cutUser/getTextType', showSearch : true, labelInvalue : false}"/>
        </a-form-item>
        <a-form-item
          label="在职状态"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-select
            v-decorator="['status', {rules: [{required: true, message: '请选择在职状态！'}]}]" 
          >
            <a-select-option value="0">
              在职人员
            </a-select-option>
            <a-select-option value="1">
              离退休人员
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="部门"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <mySelect
            ref="cu"
            :v-model.sync="cu"
            v-decorator="['departmentId', {rules: [{required: true, message: '请选择部门！'}]}]"
              
            :settings="{url:'sysDeparment/getAll', showSearch : true, labelInvalue : false, defaultValue : cuId}"/>
         
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>


<script>
import pick from 'lodash.pick'
  import mySelect from '../../myComponent/MySelect'

  import {
    postAxiosUrl,
    getUrl
  } from '@/api/manage'
export default {
components:{
  mySelect
},
  data () {
    return {
      id : '',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      cu: [],
      subject: [],
      title: [],
      cuId : '',
    }
  },
  created () {
     this.fetch()
  },
  methods: {
  add () {
    this.id = ''
    this.form.resetFields()
    this.visible = true
    this.checked = false
    this.checkedKeys = []
    this.$nextTick(() => {
      this.$refs.cu.clear()
      this.$refs.title.clear()
    })

  },
  edit (record) {
     const { form: { setFieldsValue } } = this
     this.visible = true
     const me = this
      this.$nextTick(() => {
      me.id = record.id
      setFieldsValue(pick(record, ['name']))
      setFieldsValue(pick(record, ['status']))
      setFieldsValue(pick(record, ['idCard']))
      setFieldsValue(pick(record, ['departmentId']))
      setFieldsValue({departmentId : record.departmentId})
      this.$refs.cu.setDefault(record.departmentId)
      
      setFieldsValue(pick(record, ['subject']))
      setFieldsValue({subject : record.subject})
      this.$refs.subject.setDefault(record.subject)
      
      setFieldsValue({title : record.title})
      this.$refs.title.setDefault(record.title)
       if(record.type == '1'){
         me.checked = true
         this.checkedKeys = [0]
       }else{
         me.checked = false
         me.fetchPermission()
       }
    })
    
  },
  close () {
      this.$emit('close')
      this.visible = false
  },
  handleCancel () {
      this.close()
  },
  onChange(e) {
      this.checked = e.target.checked
      if(this.checked == true)
        this.checkedKeys = [0]
      else
         this.checkedKeys = []
  },
  fetch(params = {}) {
    console.log('params:', params)
    this.loading = true
    var _this = this
    return getUrl('getAllPermission', Object.assign(params, this.queryParam))
      .then(data => {
       
        this.treeData = data.result
        this.expandedKeys = [0]
        
      })
  },
  fetchPermission(params = {}) {
    console.log('params:', params)
    this.loading = true
    var _this = this
    return getUrl('getPermission', {id : this.id})
      .then(data => {
        this.checkedKeys = data.result
      })
  },
  handleOk () {
      const _this = this
      
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          _this.confirmLoading = true
         values.id = this.id
         postAxiosUrl('cutUser/save', values)
           .then(data => {
              if(!data.success){
                 _this.$message.warning(data.error)
                 _this.confirmLoading = false
               }else{
                 _this.visible = false
                 _this.confirmLoading = false
                 _this.$emit('ok', values)
               }           
             })
        }
      })
    },
    onExpand(expandedKeys) {
          console.log('onExpand', expandedKeys)
          // if not set autoExpandParent to false, if children expanded, parent can not collapse.
          // or, you can remove all expanded children keys.
          this.expandedKeys = expandedKeys
        },
        onCheck(checkedKeys, obj) {
          const parentId =checkedKeys.filter(item=> item == 0)
          if(parentId && parentId[0] == 0){
             this.checked = true
          }else{
            this.checked = false
          }
          this.checkedKeys = checkedKeys
        },
  }
}
</script>

<style>
</style>
